@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap'
@import 'variables'
@import 'mixins'

html,
body
  font-family: 'Roboto', sans-serif
  background: $white
  word-break: break-word
  height: 100%
  font-size: 16px
  line-height: 1.1

  @include to(tablet)
    font-size: 14px

ul
  list-style-type: none
  padding: 0

img
  display: block

a
  text-decoration: none

button
  font-family: 'Roboto', sans-serif
  background: transparent
  border: none
  cursor: pointer
  padding: 0

input
  font-family: 'Roboto', sans-serif

#root
  display: flex
  flex-direction: column
  height: 100%
  & > div:first-child
    flex: 1 0 auto
  & > footer
    flex-shrink: 0

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
  -webkit-appearance: none
  margin: 0

input[type=number]
  -moz-appearance: textfield

.uppercase
  text-transform: uppercase

.arrow_left
  transform: matrix(-1, 0, 0, 1, 0, 0)
